<template>
  <div style="padding: 26px">
    <el-card>
      <el-form :inline="true" size="small">
        <el-form-item label="案件状态">
          <el-select v-model="queryData.disposeStatus">
            <el-option v-for="item in anJStatus" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictSort">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="案件类型">
          <el-select v-model="queryData.checkinDictJflxId">
            <el-option v-for="item in dict_jflxData" :key="item.dictLabel" :label="item.dictLabel"
              :value="item.dictSort">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="queryData.demandsName" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="queryData.demandsCardno" />
        </el-form-item>
        <el-form-item label="乡镇">
          <el-select v-model="queryData.checkinTownshipId" placeholder="乡镇">
            <el-option v-for="item in checkin_township" :key="item.dictCode" :label="item.dictLabel"
              :value="item.dictCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList">查 询</el-button>
          <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
          <el-button type="success" icon="el-icon-edit" v-has-permi="['permissions:add']" @click="addAn">登 记</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table :data="tableData" size="small" style="max-height: 700px; overflow: auto">
        <el-table-column label="登记时间" prop="createTime" width="180"></el-table-column>
        <el-table-column label="简要事由" prop="checkinSummary" width="300">
          <template slot-scope="scope">
            <el-popover width="400" class="item" effect="dark" :content="scope.row.checkinSummary" placement="top-start"
              trigger="hover">
              <span slot="reference">{{ scope.row.checkinSummary.slice(0, 80) + (scope.row.checkinSummary.length > 80 ?
                '...' : '') }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="纠纷类型" prop="checkinDictJflxName"></el-table-column>


        <el-table-column label="诉求人姓名" prop="demandsName"></el-table-column>
        <el-table-column label="身份证号" prop="demandsCardno" width="180"></el-table-column>
        <el-table-column label="家庭住址/或单位" prop="demandsAvatar" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column label="案件状态" prop="disposeStatus">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.disposeStatus == 0" type="">{{ dictFomt(scope.row.disposeStatus) }}</el-tag>
            <el-tag v-if="scope.row.disposeStatus == 1" type="danger">{{ dictFomt(scope.row.disposeStatus) }}</el-tag>
            <el-tag v-if="scope.row.disposeStatus == 2" type="warning">{{ dictFomt(scope.row.disposeStatus) }}</el-tag>
            <el-tag v-if="scope.row.disposeStatus == 3" type="success">{{ dictFomt(scope.row.disposeStatus) }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="分流窗口" prop="checkinExperiencedSysUserName"></el-table-column> -->
        <el-table-column label="分配" prop="checkinDeptName"></el-table-column>
        <el-table-column label="操作" prop="disposeStatus" fixed="right" width="150">
          <template slot-scope="scope">
            <el-popconfirm title="确定受理吗?" @confirm="addAccept(scope.row)">
              <template #reference>
                <el-button type="text" style="margin: 0 10px;" size="mini" v-if="scope.row.disposeStatus == 0">受
                  理</el-button>
              </template>
            </el-popconfirm>
            <el-button type="text" size="mini" @click="getInfo(scope.row)" v-if="scope.row.disposeStatus == 0">编
              辑</el-button>
            <el-button type="text" size="mini" @click="delAn(scope.row)" v-if="scope.row.disposeStatus == 0">删
              除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px; margin-bottom: 15px; float: right">
        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="totals">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" width="50%" :title="dialogTitle">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" label-width="150px" class="demo-ruleForm">
        <div style="display: flex; align-items: center">
          <div style="width: 5px; height: 20px; background: #3C82F5"></div>
          <div style="padding-left: 10px; font-weight: bold">诉求人信息</div>
        </div>
        <el-row style="margin-top: 20px">
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="登记时间" prop="name">-->
          <!--              <el-input v-model="ruleForm.demandsName"></el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <el-col :span="12">
            <el-form-item label="身份证号" prop="demandsCardno">
              <el-input v-model="ruleForm.demandsCardno" @change="getListByCard"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分流窗口">
              <el-input v-model="windowName" disabled></el-input>
              <!--              <el-select v-model="ruleForm.demandsSysUserId" style="width: 100%" placeholder="请选择分流窗口">-->
              <!--              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="demandsName">
              <el-input v-model="ruleForm.demandsName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="demandsSex">
              <el-select v-model="ruleForm.demandsSex" style="width: 100%" placeholder="请选择性别">
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乡镇" prop="checkinTownshipId">
              <el-select v-model="ruleForm.checkinTownshipId" placeholder="乡镇">
                <el-option v-for="item in checkin_township" :key="item.dictCode" :label="item.dictLabel"
                  :value="item.dictCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="checkinPhonenumber">
              <el-input v-model="ruleForm.checkinPhonenumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="家庭住址" prop="demandsAvatar">
              <el-input type="textarea" v-model="ruleForm.demandsAvatar" placeholder="请输入诉求人员的家庭地址或工作单位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; align-items: center; margin-top: 20px">
          <div style="width: 5px; height: 20px; background: #3C82F5"></div>
          <div style="padding-left: 10px; font-weight: bold">窗口登记信息</div>
        </div>
        <el-row>
          <el-col :span="24" style="margin-top: 10px;">
            <el-form-item label="简要事由" prop="checkinSummary">
              <el-input type="textarea" v-model="ruleForm.checkinSummary" :rows="4" maxlength="200" show-word-limit
                placeholder="请输入诉求描述"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纠纷类型" prop="checkinDictJflxId">
              <el-select v-model="ruleForm.checkinDictJflxId" style="width: 100%" placeholder="请选择纠纷类型">
                <el-option v-for="(item, index) in dict_jflxData" :value="item.dictValue" :label="item.dictLabel"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否受理" prop="disposeStatus">
              <el-radio v-model="ruleForm.disposeStatus" label="1">是</el-radio>
              <el-radio v-model="ruleForm.disposeStatus" label="0">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分流部门" v-if="ruleForm.disposeStatus == 1" prop="checkinDeptId">
              <el-select filterable v-model="ruleForm.checkinDeptId" style="width: 100%" placeholder="请选择分流部门">
                <el-option v-for="(item, index) in deptList" :value="item.deptId" :label="item.deptName"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
            <el-form-item label="部门经办人" prop="checkinExperiencedSysUserId">
              <el-select v-model="ruleForm.checkinExperiencedSysUserId" style="width: 100%" placeholder="请选择部门经办人">
                <el-option v-for="(item, index) in deptUser" :value="item.userId" :label="item.userName"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="ruleForm.checkinRemark" placeholder="请输入备注信息"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subData">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { listNoAuth, mainAdd, mainlist, mainUpdate, addAccept, DelAccept, listNotAuth } from '@/api/aapal'
import { getDicts } from '@/api/system/dict/data'
import { getInfo } from '@/api/login'
import Treeselect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: 'acceptance',
  components: { Treeselect },
  data() {
    return {
      msgss:'',
      checkin_township: [],/* 乡镇数据 */
      tableData: [],
      dialogTitle: '案件登记',
      windowName: '',
      deptUser: '',
      totals: 0,
      deptName: '',
      dialogVisible: false,
      ruleForm: {
        demandsName: '',
        checkinDeptId: '',
        demandsSex: '',
        checkinDictJflxId: '',
        checkinExperiencedSysUserId: '',
        checkinSummary: '',
        checkinRemark: '',
        demandsAvatar: ''
      },
      rules: {
        demandsCardno: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 18, max: 18, message: '长度为18位', trigger: 'blur' }
        ],
        demandsName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        demandsSex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        demandsAvatar: [{ required: true, message: '请输入家庭住址或工作单位', trigger: 'blur' }],
        checkinDictJflxId: [
          { required: true, message: '请选择纠纷类型', trigger: 'change' }
        ],
        checkinSummary: [
          { required: true, message: '请输入简要事由', trigger: 'blur' }
        ],
        checkinExperiencedSysUserId: [
          { required: true, message: '请选择经办人', trigger: 'change' }
        ],
        checkinTownshipId: [
          { required: true, message: '请选择乡镇', trigger: 'change' }
        ],
        checkinDeptId: [
          { required: true, message: '请选择信访部门', trigger: 'change' }
        ],
        disposeStatus: [
          { required: true, message: '请选择是否受理', trigger: 'change' }
        ],
        checkinPhonenumber: [{ required: true, message: '请输入手机号', trigger: 'change' }]
      },
      queryData: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      },
      anJStatus: [],
      dict_jflxData: []
    }
  },
  mounted() {
    this.getUserInfo()
    // this.getDeptTree()
    this.getList()
    this.getDict()
    this.getlistNotAuth()/* 获取全部部门 */
    this.$store.dispatch('webSocket/startWebSocket');
  },
  // computed: {
  //   ...mapState({
  //     websocket: state => state.websocket,
  //   }),
  // }, watch: {
  //   websocket(newVal) {
  //     if (newVal) {
  //       newVal.onmessage = (event) => {
  //       };
  //     }
  //   },
  // },

  methods: {
    getlistNotAuth() {
      listNotAuth({ parentId: 101 }).then(res => {
        this.deptList = res.data
      });
    },
    /* 重置按钮 */
    onReset() {
      this.queryData = {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      }
      this.getList()
    },
    /* 删除 */
    delAn(row) {
      this.$confirm('此操作将删除该案件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DelAccept(row.caseMainId).then(res => {
          if (res.code == 200) {
            this.$message.success('操作成功！')
            this.getList()
          }
        })
      })
    },
    /* 受理 */
    addAccept(row) {
      let params = {
        disposeStatus: 1,
        isAccept: 0,
        caseMainId: row.caseMainId,
      }
      addAccept(params).then(res => {
        if (res.code == 200) {
          this.$message.success('操作成功！')
          this.getList()
        }
      })
    },
    handleCurrentChange(val) {
      this.queryData.pageNum = val
      this.getList()
    },
    addAn() {
      this.msgss = this.$store.state.webSocket.messages
      if (this.msgss) {
        const fields = this.msgss.split(':')
        if (fields.length >= 10) {
          this.ruleForm = {
            demandsName: fields[1],
            demandsSex: fields[3] === '男' ? '1' : '2',
            demandsCardno: fields[9],
            demandsAvatar: fields[8]
          }
        }
      }
      this.dialogVisible = true
      this.dialogTitle = '案件登记'
    },
    getInfo(row) {
      row.checkinDictJflxId = row.checkinDictJflxId.toString()
      this.ruleForm = row
      this.dialogTitle = '案件编辑'
      this.dialogVisible = true
    },
    dictFomt(val) {
      var r = ''
      this.anJStatus.forEach((item) => {
        if (item.dictValue == val) {
          r = item.dictLabel
        }
      })
      return r
    },
    subData() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.dialogTitle == '案件登记') {
            if (this.ruleForm.disposeStatus == 1) {
              this.ruleForm.isAccept = 0
            }
            mainAdd(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message.success('操作成功！')
                this.getList()
                this.dialogVisible = false
                this.$refs['ruleForm'].resetFields();
              }
            })
          } else {
            mainUpdate(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message.success('操作成功！')
                this.getList()
                this.dialogVisible = false
                this.$refs['ruleForm'].resetFields();
              }
            })
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getListByCard(val) {
      var parmas = {
        demandsCardno: val
      }
      mainlist(parmas).then(res => {
        if (res.rows.length > 0) {

        }
      })
    },
    // getDeptTree() {
    //   deptTreeSelect().then(response => {
    //     this.deptOptions = response.data;
    //     this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)));
    //   });
    // },
    getUserInfo() {
      getInfo().then(res => {
        this.windowName = res.user.nickName
        localStorage.setItem('windowName', res.user.nickName)
        this.ruleForm.demandsSysUserId = res.user.userId
        this.deptName = res.user.dept.deptName
        this.deptId = res.user.dept.deptId
        // this.ruleForm.checkinDeptId = this.deptId
        this.getDeptUer()
      })
    },
    getDeptUer() {
      listNoAuth({ deptId: this.deptId }).then(res => {
        this.deptUser = res.rows
      })
    },
    getDict() {
      getDicts('dict_jflx').then(res => {
        this.dict_jflxData = res.data
      })
      getDicts('dispose_status').then(res => {
        this.anJStatus = res.data
      })
      getDicts("checkin_township").then((res) => {
        this.checkin_township = res.data;
      });
    },
    getList() {
      mainlist(this.queryData).then(res => {
        this.tableData = res.rows
        this.totals = res.total
      })
    }
  }
}
</script>

<style scoped></style>
